<%@ page import="common.*" %>
<%@ page import="exist.*" %>
<%@ page import="java.util.*" %>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 5px; }
  #map_canvas { width:75%; height: 80% }
  #list_element {width: 25%; height:80%; text-align: left; vertical-align: top; float: left;}
  ul, li { list-style:circle; margin: 1px; padding: 1px;}
</style>


<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBYnIwsBNCeufghNbsQzzFGW2fCtHytld4&sensor=false">
</script>

<%
String countryName = request.getParameter("p");
String provinceName = request.getParameter("pr");

ArrayList<City> cities = new ArrayList<City>();
cities = QueryCountry.getAllCityNameByProvinceName(provinceName);


%>

<script type="text/javascript">
	
	//note about Zoom
	// 2 or 3 for country level
	// 4, 5, or 6 for city/provinces
	
	
	var myOptions;
	var map;
	var markers = new Array();
	var infowindows = new Array();
	var geocoder;
	
  function initialize() {
	geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40, 0);
    myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
    
    
    //var bounds = new google.maps.LatLngBounds();
    
    
    //createMarker(12.56568,104.99096,'<b>Cambodia</b>','Cambodia');
    //createMarker(46.2276,2.2137,'<b>France</b>','France');
    //createMarker(-14.2350,-51.9253,'<b>Brazil</b>','Brazil');
    
    //bounds.extend(new google.maps.LatLng(12.56568,104.99096));
    //bounds.extend(new google.maps.LatLng(46.2276,2.2137));
    //bounds.extend(new google.maps.LatLng(-14.2350,-51.9253));
    
    //google.maps.event.addListener(map, 'zoom_changed', zoomControl);
    
    //map.fitBounds(bounds);
    
    
    
    
    
    /* var addss = 'United States';
    var infowin = '<b>United State</b>';
    var infotip = 'United State';
    addMarker(addss, infowin, infotip);
    addMarker('Cambodia','<b>Cambodia</b>','Cambodia');
    addMarker('France', '<b>France</b>','France');
    addMarker('Spain','<b>Spain</b>','Spain');
    addMarker('Russia','<b>Russia</b>','Russia');
    addMarker('Italy','<b>Italy</b>','Italy');
    addMarker('United Kingdom', '<b>United Kingdom</b><br/><p>this is HTML format. You can put whatever you want....</p>','United Kingdom');
    addMarker('South Africa','<b>South Africa</b>','Africa'); */
    
    
    
    <%
    	
    	//for(int k=0;k<10;k++){
    	//strHTML = QueryCountry.getCountryInfo(countries.get(k).getName());
    %>
    
    <%-- addMarker('<%=countries.get(k).getName()%>','<%=strHTML%>','<%=countries.get(k).getName()%>'); --%>
    
    <%
    
    	//}
    	
    %>
    gotoPlace('<%=request.getParameter("p")%>');
  }
  
  function zoomControl(){
	  //change zoom according to zoom level
	  zoomLevel = map.getZoom();
	    if (zoomLevel == 0) {
	      //map.setZoom(10);
	    }  
  }
  
  function createMarker(lat, lng, textinfo, tiptext){
	//add a marker
	    var marker = new google.maps.Marker({
	    	position: new google.maps.LatLng(lat, lng),
	    	map: map,
	    	title: tiptext
	    	
	    });
	    
	    //add infowindow
	    var infowindow = new google.maps.InfoWindow({
	    	content: textinfo
	    });
	    
	    //add eventlistener to the marker
	    google.maps.event.addListener(marker, 'click', function(){
	    	infowindow.open(map,marker);
	    });
	    
	    markers.push(marker);
	    infowindows.push(infowindow);
  }
  
  function createMarkerOpenInfo(lat, lng, textinfo, tiptext){
		//add a marker
		    var marker = new google.maps.Marker({
		    	position: new google.maps.LatLng(lat, lng),
		    	map: map,
		    	title: tiptext
		    	
		    });
		    
		    //add infowindow
		    var infowindow = new google.maps.InfoWindow({
		    	content: textinfo
		    });
		    
		    //add eventlistener to the marker
		    google.maps.event.addListener(marker, 'click', function(){
		    	infowindow.open(map,marker);
		    });
		    
		    infowindow.open(map,marker);
		    
		    markers.push(marker);
		    infowindows.push(infowindow);
	  }

  
  function gotoLatLng(lat, lng){
	  loc = new google.maps.LatLng(lat,lng);
	  map.setCenter(loc);
  }
  
  function gotoMarker(lat, lng){
	  var i;
	  var tmppos;
	  loc = new google.maps.LatLng(lat,lng);
	  for(i=0;i<markers.length;i++){
		  tmppos = markers[i].getPosition();
		  if(tmppos.equals(loc) == true){
			  infowindows[i].open(map,markers[i]);
			  break;
		  }
	  }
	  //map.setCenter(loc);
	  map.panTo(loc);
  }
  
  function gotoPlace(address){
	  geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        map.panTo(results[0].geometry.location);
	        
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
  }
  
  function gotoPlaceCreateMarker(address, info, tooltip){
	  geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        map.panTo(results[0].geometry.location);
	        createMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng(), info, tooltip);
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	  clearMarkers();
  }
  
  function gotoPlaceOpenInfo(address, info, tooltip){
	  geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	    	
	    	  
	        map.panTo(results[0].geometry.location);
	        createMarkerOpenInfo(results[0].geometry.location.lat(), results[0].geometry.location.lng(), info, tooltip);
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	  clearMarkers();
	  clearInfoWindows();
  }

  function clearMarkers(){
	  for(var i = 0; i < markers.length; i++) {
	  markers[i].setMap(null);
	  }
	  markers.length = 0;
  }
  
  function clearInfoWindows(){
	  for(var i = 0; i < infowindows.length; i++) {
	  infowindows[i].setMap(null);
	  }
	  infowindows.length = 0;
  }
  
  //Geocoder
  function findAddress(address){
	  	
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        //map.setCenter(results[0].geometry.location);
	        var marker = new google.maps.Marker({
	            map: map,
	            position: results[0].geometry.location
	        });
	        
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
  }
  
  function addMarker(address, infoText, infoTip){
	  	
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        //map.setCenter(results[0].geometry.location);
	        createMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng(), infoText, infoTip);
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	}
 
  function addMarkerOpenInfo(address, infoText, infoTip){
	  	
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        //map.setCenter(results[0].geometry.location);
	        createMarkerOpenInfo(results[0].geometry.location.lat(), results[0].geometry.location.lng(), infoText, infoTip);
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	}
  

</script>

<title>Le Monde</title>
</head>
<body onload="initialize()">
<h2>Le Monde : <a href="index.jsp">The World Map</a> -> <a href='Province.jsp?p=<%out.print(countryName.replaceAll(" ", "%20"));%>'><%=request.getParameter("p")%></a> -> <%=request.getParameter("pr")%></h2>

<div id="list_element">



<ul>


<%
//test getInfo of country

//loop

for(int i=0; i< cities.size();i++){
	String strHTML;
	//strHTML = QueryCountry.getCountryInfo(provinces.get(i).getName());
	//strHTML = strHTML + "<br/><a href=Province.jsp?p=" + provinces.get(i).getName() + ">Read More</a>";
	strHTML = cities.get(i).getName();
	
	
%>

<li><a href="#" onClick="gotoPlaceOpenInfo('<%=cities.get(i).getName()%>','<%out.print(strHTML);%>','<%=cities.get(i).getName()%>')"><%=cities.get(i).getName()%></a></li>

<% } //end loop%>

</ul>

</div>


<div id="map_canvas"></div>




</body>
</html>